<template>
  <div class="toTotter">
    <div class="myPrize" @click='toShowPrize()'>
      <img src="https://image.hezongyy.com/pcimage/119img/jp_btn.png" alt="">
    </div>
    <div class="bgimg1">
      <img class='top_img' src="https://image.hezongyy.com/pcimage/119img/app_top_img.jpg">
      <img class='bj_img' src="https://image.hezongyy.com/pcimage/119img/app_bj.jpg">
      <p class="times">当前抽奖次数：<span class='num'>{{luckyDrawTimes}}</span><span class='tip'>次</span></p>
      <div class="allStart">
        <img src="https://image.hezongyy.com/pcimage/119img/zhuan.png" class="turntable" :style=" 'transform: rotate(' +deg+ 'deg);  transition-duration: ' +time+'s ;'  ">
        <img src="https://image.hezongyy.com/pcimage/119img/btn.png" class="start" @click="start()">
      </div>
    </div>
    <div class="bgimg2">
      <div class="userInfo">
        <div class="leftName">
          会员名
        </div>
        <div class="leftName">
          奖项
        </div>
      </div>
      <div class="swiper_Area">
        <SwiperScroll ref="swiperScroll" :sliderNum="5" :datasource="luckUsers" :autoPlay="true" :autoPlayTime="1000" :speed="1000">
          <template slot-scope="{ item }">
            <div class="scroll_item">
              <span class="name">{{item.userName}}</span>
              <span class="prize">{{item.prizeName}}</span>
            </div>
          </template>
        </SwiperScroll>
      </div>
      <!-- 抽中的奖品 -->
      <div class="position" v-show='showGift' @click='closePrize()'>
        <div class="getGift">
          <div class="img1">
            <p class="font32">恭喜你抽中了</p>
            <p class="font40">{{this.giftInfo.name}}</p>
          </div>
          <div class="img2">
            <img src="https://image.hezongyy.com/pcimage/119img/prizeclose.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="bgimg3"></div>
    <div class="close" @click='handleClose()' v-if="dialogVisible">
      <img src="https://image.hezongyy.com/pcimage/119img/prizeclose.png" alt="">
    </div>
    <van-popup v-model="dialogVisible">
      <div class="prizeBox">
        <div class="titlle">
          我的奖品
        </div>
        <div class="goods">
          <div class="isGift" v-if="myPrize&&myPrize.url">
            <div class="prizeImg">
              <img :src="myPrize.url" alt="">
            </div>
            <p class="color333 font18">{{myPrize.name}}</p>
            <p class="get">*请尽快联系客服人员领取哦！</p>
          </div>
          <div class="noGift" v-if="!myPrize">
            <div class="prizeImg">
              <img src="https://image.hezongyy.com/pcimage/119h5/nogift.png" alt="">
            </div>
            <p class="color666 font18">这里还没有奖品哦！</p>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import SwiperScroll from '../../components/SwiperScroll.vue'
import url from '../../axios/apiUrl'
import { postRequest } from '../../api/index'
import { getRequest } from '../../api/indexGet'
export default {
  components: {
    SwiperScroll,
  },
  data() {
    return {
      showTitle: true,
      modal: false, // 展示modal模块
      modalTxt: '', // 奖品
      time: 5, // 旋转所用时间
      deg: 0, // 旋转角度
      luck: false,
      arr: [
        { deg: 0, msg: "华为mate40", id: 15 },
        { deg: 60, msg: "红包6.18元", id: 19 },
        { deg: 120, msg: "海尔（Haier）滚筒洗衣机", id: 17 },
        { deg: 180, msg: "积分618分", id: 20 },
        { deg: 240, msg: "小米电视4X 56英寸", id: 16 },
        { deg: 300, msg: "红包61.8元", id: 18 },
      ],
      luckyDrawTimes: 0, //抽奖次数
      luckUsers: [], //中奖名单
      dialogVisible: false, //查看我的奖品弹框
      showGift: false, //抽中时的弹框
      giftInfo: {}, //抽中时的信息
      myPrize: {}, //我的奖品
    }
  },
  computed: {
    // 滚动的部分参数
    classOption() {
      return {
        step: 0.5,
        limitMoveNum: 1, //这个是修改moveSwitch()之前的使用方法，这里的数值指的是数据条数
        openTouch: true,
      }
    },
  },
  created() {
    // 获取抽奖次数
    getRequest(url.submitTimes).then((res) => {
      if (res.data.code == '000000') {
        this.luckyDrawTimes = res.data.content
      }
    }),
      this.getList()
  },
  mounted() {},
  methods: {
    // 请求中奖列表
    getList() {
      getRequest(url.luckUsers).then((res) => {
        if (res.data.code == '000000') {
          this.luckUsers = res.data.content
          this.$nextTick(() => {
            this.$refs.swiperScroll.refresh()
          })
        }
      })
    },
    //点击开始
    start() {
      // if (this.luck) {
      //   return;
      // }
      // this.luck = true; // 关锁
      // let index = 4; //中奖的索引位置，axios:接口请求获得中奖的数据信息
      // this.play(index);

      if (this.luckyDrawTimes > 0) {
        if (this.luck) {
          return
        }
        this.luck = true // 关锁
        let index = -1 //中奖的索引位置，axios:接口请求获得中奖的数据信息
        getRequest(url.startLuck).then((res) => {
          if (res.data.code == '000000') {
            this.luckyDrawTimes = 0
            this.giftInfo = res.data.content
            this.arr.map((obj, index) => {
              console.log(index, '1231232')
              if (this.giftInfo.id == obj.id) {
                this.play(index)
              }
            })
          } else {
            this.$toast(res.data.message)
          }
        })
      } else {
        this.$toast('您暂时没有抽奖机会！')
      }
    },
    //根据索引开始旋转
    play(index) {
      this.deg = 360 * 3 + this.arr[index].deg
      setTimeout(() => {
        this.showRes(this.arr[index])
      }, this.time * 1000)
    },
    //　展示结果
    showRes(data) {
      this.showGift = true
      // 调用中奖列表
      this.getList()
      this.modal = true
    },
    //　关闭后重新开始
    closeModal() {
      this.luck = false //开锁
      let s = this.time
      this.modal = false
      this.time = 0 //恢复旋转时间0
      this.deg = 0 //恢复旋转角度0
      setTimeout(() => {
        this.time = s //旋转所用时间5
      }, 100)
    },
    handleClose() {
      this.dialogVisible = false
    },
    closePrize() {
      this.showGift = false
      this.closeModal()
    },
    // 查看我的奖品
    toShowPrize() {
      getRequest(url.getPrize).then((res) => {
        if (res.data.code == '000000') {
          this.dialogVisible = true
          this.myPrize = res.data.content[0]
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.toTotter {
  width: 100%;
  background: #e74435;
  .close {
    position: absolute;
    bottom:20%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 9999;
    img {
      width: 70px;
      height: 70px;
    }
  }
  .myPrize {
    position: fixed;
    right: -3px;
    top: 150px;
    z-index: 20;
    img {
      width: 79px;
      height: 214px;
    }
  }
  .bgimg1 {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    .top_img {
      font-size: 0;
      width: 100%;
      height: 100%;
    }
    .bj_img {
      width: 100%;
      height: 100%;
    }
    .rules {
      padding: 0 30px;
      text-align: center;
      font-size: 26px;
      color: #f46934;
      line-height: 37px;
    }
    .times {
      position: absolute;
      top: 400px;
      left: 50%;
      transform: translate(-50%, 0);
      font-weight: bold;
      font-size: 35px;
      color: #ffffff;
      .num {
        height: 45px;
        opacity: 1;
        font-size: 53px;
        font-weight: bold;
        text-align: center;
        color: #fce701;
        line-height: 8px;
      }
      .tip {
        padding-left: 4px;
        font-size: 35px;
        font-weight: bold;
        color: #fce701;
      }
    }
    .allStart {
      width: 707px;
      position: absolute;
      top: 525px;
      left: 50%;
      transform: translate(-50%, 0);
      .start {
        position: absolute;
        width: 179px;
        height: 169px;
        top: 200px;
        z-index: 10;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
      .turntable {
        position: absolute;
        width: 563px;
        height: 565px;
        opacity: 1;
        transform: rotate(0deg);
        transition-timing-function: ease;
        transition-property: all;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }
  .bgimg2 {
    width: 100%;
    height: 541px;
    background: url('https://image.hezongyy.com/pcimage/119img/app_bj1.jpg')
      no-repeat center;
    background-size: 100% 100%;

    .userInfo {
      padding-top: 140px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      .leftName {
        font-size: 32px;
        font-weight: bold;
        color: #333333;
        width: 250px;
        text-align: center;
      }
    }
    .seamless-warp {
      height: 450px;
      overflow: hidden;
    }
    .swiper_Area {
      width: auto;
      height: 320px;
      padding-top: 15px;
      .scroll_item {
        width: 100%;
        display: flex;
        vertical-align: middle;
        opacity: 1;
        overflow: hidden;
        text-align: center;
        .name {
          width: 50%;
        }
        .prize {
          width: 50%;
        }
      }
    }
    .userList {
      display: flex;
      flex-wrap: wrap;
    }
    .position {
      width: 100%;
      position: absolute;
      z-index: 100;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .getGift {
        width: 100%;
        animation: changeBiger 1s linear forwards;
        .img1 {
          width: 100%;
          height: 870px;
          background: url('https://image.hezongyy.com/pcimage/119h5/winprize.png')
            no-repeat center;
          text-align: center;
          background-size: 100% 100%;
          .font32 {
            padding-top: 370px;
            color: #fff;
            font-size: 32px;
            font-weight: bold;
          }
          .font40 {
            margin: 50px auto 0;
            width: 333px;
            color: #fff;
            font-weight: bold;
            font-size: 40px;
            line-height: 60px;
          }
        }
        .img2 {
          text-align: center;
          img {
            width: 76px;
            height: 76px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .bgimg3 {
    width: 100%;
    height: 696px;
    background: url('https://image.hezongyy.com/pcimage/119img/app_jp.jpg')
      no-repeat center;
    background-size: 100% 100%;
  }

  .prizeBox {
    position: relative;
    border-radius: 10px;
    min-height: 460px;
    .titlle {
      width: 710px;
      height: 88px;
      background: #f7f7f7;
      font-size: 32px;
      color: #666666;
      text-align: center;
      line-height: 88px;
    }
    .goods {
      margin-bottom: 30px;
      .noGift {
        .prizeImg {
          width: 379px;
          height: 198px;
          background: #f1f1f1;
          margin: 65px auto 0;
          img {
            width: 379px;
            height: 198px;
          }
        }
      }
      .isGift {
        .prizeImg {
          width: 230px;
          height: 230px;
          background: #f1f1f1;
          margin: 65px auto 0;
          img {
            width: 230px;
            height: 230px;
          }
        }
      }
      .font18 {
        font-size: 26px;
        margin: 28px 0 20px;
        text-align: center;
      }
      .get {
        color: #d23534;
        text-align: center;
        font-size: 16px;
      }
    }
  }
}
@keyframes changeBiger {
  0% {
    transform: scale(0.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>